<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
  <div class="nav-bar van-hairline--top">
    <ul class="nav-list">
      <router-link class="nav-list-item active" to="home">
        <i class="nbicon nblvsefenkaicankaoxianban-1"></i>
        <span>首页</span>
      </router-link>
      <router-link class="nav-list-item" to="link">
        <van-icon name="friends-o" />
        <span>联系人</span>
      </router-link>
      <router-link class="nav-list-item" to="life">
        <i class="nbicon nbfenlei add-action"></i>
        <div class="nav-list-item-end">生活圈</div>
      </router-link>
      <router-link class="nav-list-item" to="msg">
        <van-icon name="comment-o" :badge="!count ? '' : count" />
        <span>消息</span>
      </router-link>
      <router-link class="nav-list-item" to="my">
        <van-icon name="user-o" />
        <span>我的</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
  // import { onMounted, computed } from 'vue';
  // import { useRoute } from 'vue-router';
  // import { useStore } from 'vuex';
  // import { getLocal } from '/@/common/js/utils';
  // export default {
  //   setup() {
  //     const route = useRoute();
  //     const store = useStore();
  //     onMounted(() => {
  //       const token = getLocal('token');
  //       const path = route.path;
  //       if (token && !['/home', '/category'].includes(path)) {
  //         store.dispatch('updateCart');
  //       }
  //     });
  //     const count = computed(() => {
  //       return store.state.cartCount;
  //     });

  //     return {
  //       count,
  //     };
  //   },
  // };
</script>

<style lang="less" scoped>
  @import '/@/common/style/mixin';

  .nav-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    z-index: 1000;
    background: #fff;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    .nav-list {
      width: 100%;
      .fj();
      flex-direction: row;
      padding: 0;

      .nav-list-item {
        /*
      .add-action::after {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        top: -27px;
        left: 0;
        right: 0;
        margin: auto;
        box-shadow: 0 -1px 4px rgb(0 0 0 / 8%);
        border-radius: 27px;
        background-color: inherit;
        z-index: 0;
      }
      .add-action::before {
        position: absolute;
        width: 55px;
        height: 16px;
        bottom: 16px;
        left: 0;
        right: 0;
        margin: auto;
        background-color: inherit;
        z-index: 1;
      }*/
        display: flex;
        flex: 1;
        flex-direction: column;
        text-align: center;
        color: #666;

        .add-action {
          position: absolute;
          width: 38px;
          z-index: 2;
          height: 38px;
          border-radius: 50%;
          line-height: 38px;
          font-size: 27px;
          top: -19px;
          left: 0;
          right: 0;
          margin: auto;
          padding: 0;
        }

        &.router-link-active {
          color: @primary;
        }

        i {
          text-align: center;
          font-size: 22px;
        }

        span {
          font-size: 12px;
        }

        .van-icon-shopping-cart-o {
          margin: 0 auto;
          margin-bottom: 2px;
        }
      }

      .nav-list-item-end {
        height: 100%;
        padding-bottom: 3px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
    }
  }
</style>
